<template>
	<view class="search">
		<u-sticky>
			<view class="search-input">
				<view class="input-left" @click="more">
					{{ statusLabel }}
					<view class="category">
						<image src="../../static/groups.png" />
					</view>
				</view>
				<view class="input-right">
					<image src="../../static/serach.png" />
					<input v-model="searchText" value="" type="text" placeholder="输入客户名称或者工单号或者序号"
						placeholder-style="font-size: 28rpx; font-weight: 500; color: #C6C7CB;" @input="getList" />
				</view>
			</view>
			<view class="search-work">
				<view v-for="(item, index) in tabList" :key="index" class="search-work-item"
					:class="{ active: tabStatus === item.id }" @click="changeStatus(item.id)">
					{{ item.title }}
				</view>
			</view>
		</u-sticky>
		<empty v-if="dataInfo.list.length == 0" />
		<order-card v-else :propsList="dataInfo" @detail="jump_detail" type="purchase" />
	</view>
</template>

<script>
	import changetype from "../../utils/changetype.js";
	import empty from "../../components/empty.vue";
	import orderCard from "@/components/orderCard.vue";
	export default {
		components: {
			orderCard,
			empty,
		},
		data() {
			return {
				statusLabel: "全部",
				actionList: ["全部", "待采购", '采购中', '配件到位'],
				purchase_status: 0,
				tabStatus: "0",
				tabList: [
					{ id: "0", title: "保修工单" },
					{ id: "1", title: "维保工单" },
				],
				searchText: "", // 搜索内容
				page: 1, // 页码
				total: 0, // 总条数
				dataInfo: {
					type: "checkout",
					list: [],
				},
			};
		},
		watch: {
			searchText(n, o) {
				this.page = 1;
				this.dataInfo.list = [];
			},
		},
		onLoad(e) {
			this.tabStatus = e.type == "2" ? "0" : e.type || "0";
			this.getList();
		},
		methods: {
			// 跳转工单详情
			jump_detail(id) {
				uni.navigateTo({
					url: "/pages/order/detail?id=" + id,
				});
			},
			getList() {
				this.$https
					.post("/warranty/engineerPurchase", {
						purchase_status: this.purchase_status, // 状态: 1 待采购 2 采购中 3配件到货
						type_data: this.tabStatus, // 类型: 0报修   1维保
						page: this.page,
						search: this.searchText,
					})
					.then((res) => {
						let list = res.data.data;
						list.forEach((item) => {
							item.type_data = changetype(item.type_data);
						});
						this.dataInfo.list = this.page === 1 ? list : this.dataInfo.list.concat(list);
						this.total = res.data.total;

						if (this.page === 1) {
							uni.pageScrollTo({
								scrollTop: 0,
								duration: 300
							});
						}
					});
			},
			// 切换状态
			changeStatus(id) {
				this.tabStatus = id;
				this.page = 1;
				this.getList();
			},
			/* 选择类目 */
			more() {
				uni.showActionSheet({
					itemList: this.actionList,
					success: (res) => {
						this.statusLabel = this.actionList[res.tapIndex];
						this.purchase_status = res.tapIndex;
						this.page = 1;
						this.getList();
					},
				});
			},
		},
		onReachBottom() {
			if (this.dataInfo.list.length < this.total) {
				this.page++;
				this.getList();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.search {
		padding: 28rpx 32rpx;
		background-color: #f6f6fb;
		min-height: calc(100vh - 86rpx); 
		padding-top: 0;

		&-input {
			display: flex;
			align-items: center;
			background-color: #f6f6fb;
			padding-top: 30rpx;

			.input-left {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
				color: #303030;
				margin-right: 56rpx;
				position: relative;

				.category {
					position: absolute;
					right: -42rpx;
					top: 0rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.input-right {
				flex: 1;
				background-color: #ffffff;
				border-radius: 88rpx;
				padding: 0 20rpx;
				height: 80rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #c6c7cb;
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}

				input {
					flex: 1;
				}
			}
		}

		&-work {
			position: sticky;
			/* #ifdef MP-WEIXIN || APP-PLUS */
			top: 0rpx;
			/* #endif */
			/* #ifdef H5 */
			top: 80rpx;
			/* #endif */
			background-color: #f6f6fb;
			z-index: 9;
			display: flex;
			padding: 20rpx 0 40rpx 0;
			justify-content: space-between;

			&-item {
				text-align: center;
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #969699;
				line-height: 48rpx;
			}

			.active {
				font-size: 36rpx;
				font-weight: 550;
				color: #141414;
				line-height: 48rpx;
				position: relative;

				&::before {
					content: "";
					width: 60rpx;
					height: 8rpx;
					border-radius: 8rpx;
					background-color: $public-oclor;
					position: absolute;
					bottom: -16rpx;
					left: 50%;
					margin-left: -30rpx;
				}

				&::after {
					content: "";
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background-color: $public-oclor;
					position: absolute;
					bottom: -16rpx;
					left: 50%;
					margin-left: -40rpx;
				}
			}
		}
	}
</style>